
<!-- 自定义组件 -->
<template>
    <!-- 头部容器 -->
    <div class="header-container">
        <!-- 左边部分 -->
        <div class="left-content" style="margin-left: 20px;">
            <!-- 菜单折叠 切换按钮 -->
            <el-button icon="el-icon-menu" size="medium" @click="handlerMene"></el-button>
            <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right" style="padding-left: 10px;">
            <!-- 解释：
                1、:to="{ path: item.path }" 面包屑路由跳转对象，同 vue-router 的 to
                2、:key="item.path"： 这里如果没有key编译报错，key主要用来做dom diff算法用的，
                为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM
                 -->
                <el-breadcrumb-item v-for="item in tags" :key="item.path" :to="{ path: item.path }">{{ item.label
                }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 右边部分 -->
        <div class="right-content">
            <span style="color: aliceblue;"> {{ "你好："+username}} </span>
            <!-- 下拉菜单 -->
            <el-dropdown @command="handleCommand">
                <!-- 下拉主体- 用户头像 -->
                <span class="el-dropdown-link">
                    <!-- 头像图片 -->
                    <img class="user-image" src="@/assets/images/user1.png">
                </span>
                <!-- 下拉列表 -->
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-user" command="myCenter">个人中心</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-switch-button" command="exit">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>
<script>
import { mapState } from "vuex" //引入vuex的mapState辅助函数。避免多个属性时，需要分别写获取逻辑，比较繁琐

export default {

    /**
     * 为了避免报下面的错误，这里名称改为大写开头
     * Do not use built-in or reserved HTML elements as component id: header
     */
    name: 'Header',
    data() {
        return {
            username:""
        }
    },
    methods: {
        //对菜单做折叠操作
        handlerMene() {
            console.info("对菜单做折叠操作");
            //利用 Vuex 的 store库，操作collapseChange函数来修改公共状态
            this.$store.commit("collapseChange")
        },
        handleCommand(command) {
            // alert(command);
            if (command == "exit") {
                this.$confirm("是否确认退出？", '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '注销成功!'
                    });
                    sessionStorage.clear();
                    this.$router.push("/Login");
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            }
        }
    },
    mounted(){
        this.username = sessionStorage.getItem("username");
    },
    //计算，返回指定的数据可以直接在视图中使用
    computed: {
        // 使用对象展开运算符将此对象混入到外部对象中
        // 映射vuex的store中的state对象，后面括号中就可以直接使用state对象的数据
        ...mapState({
            //将vuex的公共状态数据 tabsList ，赋值给tags。state对象.子模块名称.公共数据变量
            tags: state => state.tab.tabsList
        })
    }
}
</script>

<style lang="less" scoped>
.header-container {
    height: 60px;
    background-color: #242f42;

    /** 弹性布局 */
    display: flex; //布局展示：弹性
    justify-content: space-between; //内容对齐：空间两级分布
    align-items: center; //内容居中

    /** 右上角 用户头像 */
    .right-content {
        margin-right: 20px; //右外边距 20像素

        .user-image {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }
    }

    /** 折叠按钮 + 面包屑 */
    .left-content {
        display: flex;
        align-items: center;

        // 面包屑文字样式， 这里的语法没明白
        /deep/.el-breadcrumb__item {
            .el-breadcrumb__inner {
                font-weight: normal;

                &.is-link {
                    color: #666;
                }
            }

            &:last-child {
                .el-breadcrumb__inner {
                    color: #fff;
                }
            }
        }
    }

}
</style>